<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="start">start</button>
    <button id="clear">clear</button>
</body>
<script>
    // 计时器  => 每隔固定的事件执行既定的操作

    // setInterval(callback,Interval)  设置计时器(开启一个新的)
    // callback  每隔固定时间执行的回调函数 (callback): 把函数当做参数传入到另一个函数中,让它在另一个函数中执行(传入时不执行,调用时才执行)  锦囊妙计   提前决定好要执行的内容 => 真正调用时执行
    // Interval  回调函数执行的间隔时间 (单位ms)

    // 返回值:  计时器的编号 (目的:对应清除)

    // 注意: 从计时器启动到第一次执行回调函数,需要先等待指定的间隔时间

    // 清除计时器
    // clearInterval(计时器的编号);

    // 问: 已经被清除的计时器 是否重新启动?  
    // 不行  =>  怎么办? 在创建一个新的


    // 变量跨作用域问题?
    // 一个作用域中声明  如何在另一个作用域中访问?
    // 把变量提取到两个作用域都能访问的位置

    // 问题: 计时器在事件或函数中可能被连续点击/调用 触发 => 变量被覆盖的情况 => 导致原原先的计时器无法被清除
    // 怎么解决?  

    var start = document.getElementById("start");
    var clear = document.getElementById("clear");

    var timer1 = null;
    var timer2 = null;

    var count = 0;
    function logTime() {
        var date = new Date();
        console.log(date);
    }



    start.onclick = function () {
        clearInterval(timer1);
        clearInterval(timer2);

        // 每次启动新的计时器之前 先清除旧的
        timer1 = setInterval(logTime, 1000);
        timer2 = setInterval(function () {
            count++;
            console.log(count);
        }, 1000);
        console.log(timer1);
        console.log(timer2);

    }
    clear.onclick = function () {
        clearInterval(timer1);
        clearInterval(timer2);
    }







</script>

</html>